<template>
  <div>
    <p>当前总人数：{{ userList.length }}</p>
    <el-input class="input" placeholder="请输入姓名" v-model.trim="name" />
    <el-input
      class="input"
      placeholder="请输入年龄"
      v-model.number.trim="age"
    />
    <el-button @click="addPerson({ name, age, isEdit: false })">添加</el-button>

    <el-table height="300" :data="userList" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="100">
        <template slot-scope="scope">
          <el-input
            v-if="userList[scope.$index].isEdit"
            v-model="userList[scope.$index].name"
          />
          <span v-else>{{ userList[scope.$index].name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="100">
        <template slot-scope="scope">
          <el-input
            v-if="userList[scope.$index].isEdit"
            v-model="userList[scope.$index].age"
          />
          <span v-else>{{ userList[scope.$index].age }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="say" label="格言"> </el-table-column>
      <el-table-column fixed="right" width="200" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="
              handleEdit({
                id: userList[scope.$index].id,
                name: userList[scope.$index].name,
                age: userList[scope.$index].age,
              })
            "
            >{{ userList[scope.$index].isEdit ? "确认" : "编辑" }}</el-button
          >
          <el-button
            @click.native.prevent="handdel(userList[scope.$index].id)"
            size="small"
            type="danger"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <DelModel :openModify="isDel" @handClose="handClose" @handlEmit="handlEmit"/>
  </div>
</template>
<script>
import DelModel from './dialog.vue'
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState("Person", ["userList"]),
  },
  components:{
      DelModel
  },
  data() {
    return {
      name: "",
      age: "",
      isDel: false,
      personId: ''
    };
  },
  methods: {
    ...mapActions("Person", ["addPerson", "delPersonRow", "handleEdit"]),
    handdel(id){
        this.personId = id
       this.isDel = true 
    },
    handClose(flag){
        this.isDel = flag
    },
    handlEmit(flag) {
        this.isDel = flag
        this.delPersonRow(this.personId)
    }
  },
};
</script>
<style scoped>
.input {
  width: 100px;
}
</style>>
    
